<template>
  <div class="folder-wrapper">
    <folder-tree
      :folder-list.sync="folderList"
      :file-list.sync="fileList"
      :folder-drop="folderDrop"
      :file-drop="fileDrop"
    ></folder-tree>
    <!-- <Tree :data="folderTree" :render="renderFunc"></Tree> -->
  </div>
</template>

<script>
// 1、扁平数据树状化
import { getFolderList, getFileList } from '@/api/data'
import FolderTree from '../components/folder-tree'


export default {
  name: 'Folder',
  data () {
    return {
      folderList: [],
      fileList: [],
      folderTree: [],
      folderDrop: [
        {
          name: 'rename',
          title: '重命名'
        },
        {
          name: 'delete',
          title: '删除文件夹'
        }
      ],
      fileDrop: [
        {
          name: 'rename',
          title: '重命名'
        },
        {
          name: 'delete',
          title: '删除文件'
        }
      ]
    }
  },
  components: {
    FolderTree
  },
  mounted () {
    Promise.all([getFolderList(), getFileList()]).then(res => {
      this.folderList = res[0]
      this.fileList = res[1]
      // console.log(this.folderList)
      // console.log(this.fileList)
    })
  }
}
</script>

<style lang="stylus">
.folder-wrapper
  width 300px
</style>
